<template>
  <div class="charging-scheme">
    <!-- 搜索筛选区 -->
    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="方案名称:">
          <el-input 
            v-model="filterForm.schemeName" 
            placeholder="请输入"
            clearable
            class="filter-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="计费方式:">
          <el-select 
            v-model="filterForm.billingMethod" 
            placeholder="全部"
            clearable
            class="filter-select"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="单一计费方式" value="single"></el-option>
            <el-option label="阶梯计费方式" value="tiered"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchData">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮区 -->
    <div class="action-container">
      <div class="action-buttons">
        <el-button type="primary" icon="el-icon-plus" @click="addScheme">新增方案</el-button>
      </div>
    </div>
    <!-- 数据表格 -->
    <div class="table-container">
      <div class="table-header">
        <div class="table-title">
          <i class="el-icon-tickets"></i>
          收费方案列表
        </div>
        <div class="table-info">
          共 {{ tableData.length }} 条数据
        </div>
      </div>
      <el-table 
        :data="tableData" 
        border 
        stripe
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        class="custom-table"
        v-loading="loading"
        element-loading-text="加载中..."
      >
        <el-table-column prop="schemeName" label="计费方案名称" width="180" align="center"></el-table-column>
        <el-table-column prop="billingMethod" label="计费方式" width="150" align="center">
          <template slot-scope="scope">
            <el-tag 
              size="small" 
              type="primary"
            >
              {{ scope.row.billingMethod }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="meterType" label="仪表类型" width="120" align="center">
          <template slot-scope="scope">
            <el-tag 
              size="small" 
              :type="scope.row.meterType === '水表' ? 'info' : 'warning'"
            >
              {{ scope.row.meterType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价" width="120" align="center">
          <template slot-scope="scope">
            <span class="price-value">{{ scope.row.unitPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" fixed="right" align="center">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button 
                type="primary" 
                size="mini" 
                icon="el-icon-edit"
                @click="editScheme(scope.row)"
              >
                编辑
              </el-button>
              <el-button 
                type="info" 
                size="mini" 
                icon="el-icon-document"
                @click="viewScheme(scope.row)"
              >
                记录
              </el-button>
              <el-button 
                type="warning" 
                size="mini" 
                icon="el-icon-setting"
                @click="configScheme(scope.row)"
              >
                绑定仪表
              </el-button>
              <el-button 
                type="danger" 
                size="mini" 
                icon="el-icon-delete"
                @click="deleteScheme(scope.row)"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          class="custom-pagination"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 新增/编辑方案弹窗 -->
    <el-dialog
      :title="schemeDialog.isEdit ? '修改收费方案' : '新增收费方案'"
      :visible.sync="showSchemeDialog"
      width="800px"
      class="custom-dialog"
      :close-on-click-modal="false"
    >
      <div class="scheme-dialog-content">
        <div class="scheme-warning" v-if="schemeDialog.isEdit">
          <el-alert
            title="此方案正在使用中，修改后将立即生效，请谨慎操作！"
            type="warning"
            :closable="false"
            show-icon
          >
          </el-alert>
        </div>
        <el-form :model="schemeForm" :rules="schemeRules" ref="schemeForm" label-width="120px" class="scheme-form">
          <el-form-item label="方案ID:" v-if="schemeDialog.isEdit">
            <el-input v-model="schemeForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="方案名称:" prop="schemeName">
            <el-input v-model="schemeForm.schemeName" placeholder="请输入方案名称"></el-input>
          </el-form-item>
          <el-form-item label="扣费方式:" prop="billingMethod">
            <el-radio-group v-model="schemeForm.billingMethod">
              <el-radio label="预付费方式">预付费方式</el-radio>
              <el-radio label="后付费方式">后付费方式</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="电价类型:" prop="priceType">
            <el-radio-group v-model="schemeForm.priceType">
              <el-radio label="单费率电价">单费率电价</el-radio>
              <el-radio label="复费率电价">复费率电价</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="费率等级:" prop="rateLevel">
            <el-select v-model="schemeForm.rateLevel" placeholder="请选择">
              <el-option label="一费率" value="1"></el-option>
              <el-option label="二费率" value="2"></el-option>
              <el-option label="三费率" value="3"></el-option>
              <el-option label="四费率" value="4"></el-option>
            </el-select>
          </el-form-item>
          <!-- 费率设置 -->
          <div class="rate-settings">
            <h4>费率设置</h4>
            <div class="rate-grid">
              <div class="rate-item" v-for="i in parseInt(schemeForm.rateLevel)" :key="i">
                <el-form-item :label="`费率数${i}(峰)(元/kwh):`">
                  <el-input 
                    v-model="schemeForm.rates[`rate${i}Peak`]" 
                    placeholder="请输入"
                    type="number"
                  ></el-input>
                </el-form-item>
                <el-form-item :label="`附加费${i}(元/kwh):`">
                  <el-input 
                    v-model="schemeForm.rates[`rate${i}Additional`]" 
                    placeholder="请输入"
                    type="number"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
          <el-form-item label="备注说明:">
            <el-input 
              v-model="schemeForm.remark" 
              type="textarea"
              :rows="3"
              placeholder="请输入备注说明"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="scheme-tips">
          <p><strong>备注说明:</strong></p>
          <p>1. 预付费方式为先充值后使用，余额不足时自动断电</p>
          <p>2. 后付费方式为先使用后付费，可设置透支额度</p>
          <p>3. 单费率电价为固定单价，复费率电价可设置峰谷平时段不同价格</p>
          <p>4. 确认保存后，该方案将立即生效，请仔细核对各项参数</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showSchemeDialog = false">取消</el-button>
        <el-button @click="resetSchemeForm">重置</el-button>
        <el-button 
          type="primary" 
          @click="saveScheme"
          :loading="saving"
        >
          {{ saving ? '保存中...' : '确定' }}
        </el-button>
      </div>
    </el-dialog>
    <!-- 绑定仪表弹窗 -->
    <el-dialog
      title="绑定仪表"
      :visible.sync="showBindDialog"
      width="600px"
      class="custom-dialog"
    >
      <div class="bind-content">
        <div class="bind-info">
          <p><strong>方案名称:</strong> {{ selectedScheme ? selectedScheme.schemeName : '' }}</p>
          <p><strong>计费方式:</strong> {{ selectedScheme ? selectedScheme.billingMethod : '' }}</p>
        </div>
        <div class="meter-selection">
          <h4>选择要绑定的仪表</h4>
          <el-transfer
            v-model="bindMeters"
            :data="availableMeters"
            :titles="['可用仪表', '已绑定仪表']"
            :button-texts="['移除', '绑定']"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}'
            }"
            filterable
            filter-placeholder="搜索仪表"
          >
          </el-transfer>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showBindDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmBind">确认绑定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import chargingSchemeMock from '@/api/mock/chargingScheme'
export default {
  name: 'ChargingScheme',
  data() {
    return {
      loading: false,
      saving: false,
      tableData: [],
      filterForm: {
        schemeName: '',
        billingMethod: ''
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      showSchemeDialog: false,
      showBindDialog: false,
      schemeDialog: {
        isEdit: false
      },
      selectedScheme: null,
      schemeForm: {
        id: '',
        schemeName: '',
        billingMethod: '预付费方式',
        priceType: '单费率电价',
        rateLevel: '4',
        rates: {},
        remark: ''
      },
      schemeRules: {
        schemeName: [
          { required: true, message: '请输入方案名称', trigger: 'blur' }
        ],
        billingMethod: [
          { required: true, message: '请选择扣费方式', trigger: 'change' }
        ],
        priceType: [
          { required: true, message: '请选择电价类型', trigger: 'change' }
        ],
        rateLevel: [
          { required: true, message: '请选择费率等级', trigger: 'change' }
        ]
      },
      bindMeters: [],
      availableMeters: [
        { key: '1', label: '101号房间 - 电表001' },
        { key: '2', label: '102号房间 - 电表002' },
        { key: '3', label: '103号房间 - 电表003' },
        { key: '4', label: '104号房间 - 电表004' },
        { key: '5', label: '105号房间 - 电表005' }
      ],
      headerCellStyle: {
        backgroundColor: '#f8f9fa',
        color: '#495057',
        fontWeight: 'bold',
        textAlign: 'center'
      }
    }
  },
  mounted() {
    this.loadData()
    this.initSchemeForm()
  },
  methods: {
    loadData() {
      this.loading = true
      setTimeout(() => {
        const response = chargingSchemeMock
        this.tableData = response.msg.list
        this.pagination.total = response.msg.total
        this.loading = false
      }, 500)
    },
    searchData() {
      this.pagination.currentPage = 1
      this.loadData()
    },
    resetFilter() {
      this.filterForm = {
        schemeName: '',
        billingMethod: ''
      }
      this.loadData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadData()
    },
    addScheme() {
      this.schemeDialog.isEdit = false
      this.initSchemeForm()
      this.showSchemeDialog = true
    },
    editScheme(scheme) {
      this.schemeDialog.isEdit = true
      this.selectedScheme = scheme
      this.schemeForm = {
        id: scheme.id || '19919',
        schemeName: scheme.schemeName,
        billingMethod: '预付费方式',
        priceType: '复费率电价',
        rateLevel: '4',
        rates: {
          rate1Peak: '0.5',
          rate1Additional: '0.1',
          rate2Peak: '0.6',
          rate2Additional: '0.1',
          rate3Peak: '0.7',
          rate3Additional: '0.1',
          rate4Peak: '0.8',
          rate4Additional: '0.1'
        },
        remark: '标准收费方案'
      }
      this.showSchemeDialog = true
    },
    viewScheme(scheme) {
      this.$message.success('查看方案记录: ' + scheme.schemeName)
    },
    configScheme(scheme) {
      this.selectedScheme = scheme
      this.bindMeters = ['1', '2'] // 已绑定的仪表
      this.showBindDialog = true
    },
    deleteScheme(scheme) {
      this.$confirm('确认删除该收费方案吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.loadData()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    initSchemeForm() {
      this.schemeForm = {
        id: '',
        schemeName: '',
        billingMethod: '预付费方式',
        priceType: '单费率电价',
        rateLevel: '4',
        rates: {},
        remark: ''
      }
    },
    resetSchemeForm() {
      this.$refs.schemeForm.resetFields()
      this.initSchemeForm()
    },
    saveScheme() {
      this.$refs.schemeForm.validate((valid) => {
        if (valid) {
          this.saving = true
          setTimeout(() => {
            this.$message.success(this.schemeDialog.isEdit ? '修改成功' : '新增成功')
            this.saving = false
            this.showSchemeDialog = false
            this.loadData()
          }, 1000)
        }
      })
    },
    confirmBind() {
      this.$message.success('绑定成功')
      this.showBindDialog = false
    }
  }
}
</script>
<style scoped>
/* 主容器样式 */
.charging-scheme {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}
/* 面包屑导航 */
.breadcrumb-nav {
  margin-bottom: 24px;
}
/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.page-title {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-title i {
  color: #27ae60;
  font-size: 28px;
}
/* 筛选容器 */
.filter-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 24px;
}
.filter-form {
  margin: 0;
}
.filter-input {
  width: 200px;
}
.filter-select {
  width: 150px;
}
/* 操作按钮区 */
.action-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 20px 24px;
}
.action-buttons {
  display: flex;
  gap: 12px;
}
.action-buttons .el-button {
  border-radius: 8px;
  font-weight: 500;
}
/* 表格容器 */
.table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}
.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-title i {
  color: #27ae60;
  font-size: 20px;
}
.table-info {
  color: #6c757d;
  font-size: 14px;
}
.price-value {
  color: #27ae60;
  font-weight: 600;
}
/* 分页容器 */
.pagination-container {
  padding: 20px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: center;
}
.custom-pagination {
  text-align: center;
}
/* 方案弹窗样式 */
.scheme-dialog-content {
  padding: 20px;
}
.scheme-warning {
  margin-bottom: 20px;
}
.scheme-form {
  margin-bottom: 20px;
}
.rate-settings {
  margin: 20px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}
.rate-settings h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}
.rate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.rate-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scheme-tips {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
}
.scheme-tips p {
  margin: 8px 0;
  font-size: 14px;
  color: #6c757d;
  line-height: 1.5;
}
.dialog-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid #ebeef5;
}

/* 表格操作按钮样式 */
.custom-table .action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* 按钮之间的间距 */
  justify-content: center; /* 居中显示 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .charging-scheme {
    padding: 15px;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
  }
  .filter-container {
    padding: 15px;
  }
  .filter-form .el-form-item {
    margin-right: 0;
    width: 100%;
  }
  .filter-input,
  .filter-select {
    width: 100%;
  }
  .action-container {
    padding: 15px;
  }
  .action-buttons {
    flex-direction: column;
  }
  .action-buttons .el-button {
    width: 100%;
  }
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
  }
  .table-info {
    margin-top: 10px;
  }
  .pagination-container {
    padding: 15px;
  }
  .scheme-dialog-content {
    padding: 15px;
  }
  .rate-grid {
    grid-template-columns: 1fr;
  }
}
</style>


